<template>
  <div class="pagestyle">
    <list_controller
      ref="zujianname"
      :options="state.optionsList"
      pageName=""
      @tabChange="tabChange"
      :tabName="state.tabNameData"
      @yinyong="yinyong1"
    >
      <template v-slot:opraCurdBtnAll>
        <!-- <el-button class="btn" type="primary" link @click="addBtn('mul')">
                  <el-icon style="margin-right: 2px;">
                      <svg-icon class-name="search-icon" icon-class="addtotal" />
                  </el-icon>新增
              </el-button>
              <el-button class="btn" type="primary" link @click="deleteBtn('mul')">
                  <el-icon>
                      <DeleteFilled />
                  </el-icon>删除
              </el-button> -->
        <el-button class="btn" type="primary" link @click="qiehuan">
          <el-icon>
            <svg-icon class-name="search-icon" icon-class="Chart switching" />
          </el-icon>
          <span style="margin-left: 5px">图表</span>
        </el-button>
      </template>
      <template v-slot:expandFixed="row">
        <!-- <div class="expand-wrapper" v-if="row.row.row.sensorSimulateChildList">
          <vxe-table border :data="row.row.row.sensorSimulateChildList">
            <vxe-column
              v-for="(item, index) in state.optionsList.subtableheads"
              :field="item.field"
              :title="item.title"
              :params="{ name: item.name }"
              :width="item.width ? item.width : ''"
              :key="index"
            >
            </vxe-column>
          </vxe-table>
        </div>
        <div class="expand-wrapper" v-if="row.row.row.sensorSwitchChildList">
          <vxe-table border :data="row.row.row.sensorSwitchChildList">
            <vxe-column
              v-for="(item, index) in state.optionsList.subtableheads"
              :field="item.field"
              :title="item.title"
              :params="{ name: item.name }"
              :width="item.width ? item.width : ''"
              :key="index"
            >
            </vxe-column>
          </vxe-table>
        </div>
        <div class="expand-wrapper" v-if="row.row.row.sensorAddChildList">
          <vxe-table border :data="row.row.row.sensorAddChildList">
            <vxe-column
              v-for="(item, index) in state.optionsList.subtableheads"
              :field="item.field"
              :title="item.title"
              :params="{ name: item.name }"
              :width="item.width ? item.width : ''"
              :key="index"
            >
            </vxe-column>
          </vxe-table>
        </div> -->
      </template>
      <template v-slot:opraCurdBtn1="row">
        <span>
          <el-button
            type="primary"
            link
            size="small"
            @click="cuoshiBtn(row.row.row)"
            >措施处理</el-button
          >
          <!-- <el-button
            type="primary"
            link
            size="small"
            @click="editBtn(row.row.row)"
            >编辑</el-button
          >
          <el-button
            type="primary"
            :disabled="row.row.row.refStatus == '已引用'"
            link
            size="small"
            @click="deleteBtn(row.row.row)"
            >删除</el-button
          > -->
        </span>
      </template>
    </list_controller>
    <!-- 措施处理 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="600"
        :height="auto"
        v-model="state.addModal"
        resize
        :mask="true"
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">
            <div style="display: flex">
              <span
                ><img src="@/assets/images/keranqiti/措施处理.png" alt=""
              /></span>
              <span>{{ state.modalTitle }}</span>
            </div>
          </div>
        </template>
        <template #default>
          <div class="form_box">
            <div class="one" v-if="state.tabNameData == '测点异常'">
              <div class="title1">
                {{ state.cuoshiDetail.pointNumber }}
                {{ state.cuoshiDetail.statusDescription }} 【{{
                  state.cuoshiDetail.installPlace
                }}】
              </div>
              <el-form label-width="100px" label-position="left">
                <el-row>
                  <el-col :span="12">
                    <el-form-item>
                      <template #label>
                        <span>传感器名称：</span>
                      </template>
                      <span>{{ state.cuoshiDetail.pointName }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item>
                      <template #label>
                        <span>高/低报警：</span>
                      </template>
                      <span
                        >{{ state.cuoshiDetail.highFaultValue }}/{{
                          state.cuoshiDetail.lowFaultValue
                        }}</span
                      >
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item>
                      <template #label>
                        <span>异常值：</span>
                      </template>
                      <span style="color: rgba(230, 162, 60, 1)"
                        >{{ state.cuoshiDetail.realTimeValue }}ppm</span
                      >
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item>
                      <template #label>
                        <span>异常类型：</span>
                      </template>
                      <span>{{ state.cuoshiDetail.errorType }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item>
                      <template #label>
                        <span>异常时间：</span>
                      </template>
                      <span>{{ state.cuoshiDetail.startTime }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item>
                      <template #label>
                        <span>处理状态：</span>
                      </template>
                      <span style="color: rgba(212, 48, 48, 0.8)">{{
                        state.cuoshiDetail.handleStatus
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="two">
              <h3>原因</h3>
              <div>
                <el-form-item>
                  <el-input v-model="state.formData.handleReason" placeholder="请输入"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="two">
              <h3>处理人</h3>
              <div>
                <el-form-item>
                  <el-select
                    style="width: 100%"
                    placeholder="请选择"
                     v-model="state.formData.handleBy"
                  >
                <el-option label="系统默认" value="系统默认"></el-option>
                </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="two">
              <h3>处理结果</h3>
              <div>
                <el-form-item>
                  <el-input   v-model="state.formData.handleResult" placeholder="请输入"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="form_footer">
              <el-button @click="cancel">取消</el-button>
              <el-button type="primary" @click="submitForm"> 确定 </el-button>
            </div>
          </div>
        </template>
      </vxe-modal>
    </teleport>
  </div>
</template>
<script setup>
import list_controller from "@/components/commonCom/list_controller";
import { useRouter } from "vue-router";
import { computed, onMounted, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { table_headers } from "@/components/commonCom/table_headers";
import axios from "@/utils/request";
import {
  getchildIndex,
  getsensorName,
  getunit,
  fileupload,
  getchildIndexadd,
  getsensorNameadd,
} from "@/api/config";
import usePagesStore from "@/store/modules/pages";
const { proxy } = getCurrentInstance();
const store = usePagesStore();
const router = useRouter();
const emit = defineEmits(["qiehuan"]);
components: {
  list_controller;
}
let state = reactive({
  tabNameData: "分站异常",
  optionsList: {},
  options: {
    // expandFixed: true,
    isShowCaozuo: true,
    tabList: [
      {
        tabIndex: 1,
        name: "分站异常",
      },
      {
        tabIndex: 2,
        name: "测点异常",
      },
      {
        tabIndex: 3,
        name: "电源异常",
      },
    ],
    tableheads: computed(() => table_headers.realTimeSubstationError),
    // subtableheads: computed(() => table_headers.specialSimulateChild),
    queryList: {
      dropdownUrl: "",
      querys: [
        {
          field: "substationNumber",
          title: "分站编号",
          type: "input",
          binddata: "",
        },
        {
          field: "errorType",
          title: "故障类型",
          type: "select",
          binddata: "",
          options: [],
        },
        {
          field: "startTime",
          title: "开始时间",
          type: "datetime",
          binddata: "",
        },
      ],
      queryMap: new Map([
        ["sensorTypeId", "safety_pointType"],
        ["deviceTypeId", "safety_deviceType"],
        ["alarmTypeId", "alarmType"],
      ]),
    },
    dataUrl: "/realTime/error/substation/list",
    selectUrl:'/realTime/error/substation/errorType/list',
    delUrl: "/sensor/simulate/deleteSpecial",
    addUrl: "/sensor/simulate/addSpecial",
    descUrl: "/sensor/simulate/detailSpecial?primaryIndexId=",
    editUrl: "/realTime/error/substation",
    validParam: "/sensor/simulate/validParam",
  },
  options1: {
    // expandFixed: true,
    isShowCaozuo: true,
    tabList: [
      {
        tabIndex: 1,
        name: "分站异常",
      },
      {
        tabIndex: 2,
        name: "测点异常",
      },
      {
        tabIndex: 3,
        name: "电源异常",
      },
    ],
    tableheads: computed(() => table_headers.realTimePointError),
    subtableheads: computed(() => table_headers.specialSwitchChild),
    queryList: {
      dropdownUrl: "",
      querys: [
        {
          field: "pointNumber",
          title: "测点编号",
          type: "input",
          binddata: "",
        },
        {
          field: "errorType",
          title: "故障类型",
          type: "select",
          binddata: "",
          options: [],
        },
        {
          field: "startTime",
          title: "开始时间",
          type: "datetime",
          binddata: "",
        },
      ],
      queryMap: new Map([
        ["sensorTypeId", "safety_pointType"],
        ["deviceTypeId", "safety_deviceType"],
        ["alarmTypeId", "alarmType"],
      ]),
    },
    dataUrl: "/realTime/error/point/list",
    selectUrl:'/realTime/error/point/errorType/list',
    delUrl: "/sensor/switch/deleteSpecial",
    addUrl: "/sensor/switch/addSpecial",
    descUrl: "/sensor/switch/detailSpecial?primaryIndexId=",
    editUrl: "/realTime/error/point",
    validParam: "/sensor/switch/validParam",
  },
  options2: {
    // expandFixed: true,
    isShowCaozuo: true,
    tabList: [
      {
        tabIndex: 1,
        name: "分站异常",
      },
      {
        tabIndex: 2,
        name: "测点异常",
      },
      {
        tabIndex: 3,
        name: "电源异常",
      },
    ],
    tableheads: computed(() => table_headers.realTimePowerError),
    subtableheads: computed(() => table_headers.specialAddChild),
    queryList: {
      dropdownUrl: "",
      querys: [
        {
          field: "errorType",
          title: "故障类型",
          type: "select",
          binddata: "",
          options: [],
        },
        {
          field: "startTime",
          title: "开始时间",
          type: "datetime",
          binddata: "",
        },
      ],
      queryMap: new Map([
        ["sensorTypeId", "safety_pointType"],
        ["deviceTypeId", "safety_deviceType"],
        ["alarmTypeId", "alarmType"],
      ]),
    },
    dataUrl: "/realTime/error/power/list",
    selectUrl:'/realTime/error/power/errorType/list',
    delUrl: "/sensor/add/deleteSpecial",
    addUrl: "/sensor/add/addSpecial",
    descUrl: "/sensor/add/detailSpecial?primaryIndexId=",
    editUrl: "/realTime/error/power",
    validParam: "/sensor/add/validParam",
  },
  // 表单
  // tabName: 'simulate',
  addModal: false,
  modalTitle: "措施处理",
  cuoshiDetail: {},
  formData: {},
  // editId: undefined,
  // addeditShow: false,
});
//图表切换
const qiehuan = () => {
  emit("qiehuan");
};
// 新增按钮
function addBtn(row) {
  // if (state.tabName == 'simulate') {
  //     state.modalTitle = '新增模拟量索引'
  // } else if (state.tabName == 'switch') {
  //     state.modalTitle = '新增开关量索引'

  // } else if (state.tabName == 'add') {
  //     state.modalTitle = '新增累计量索引'
  // }
  state.addModal = true;
  // state.formData = {}
  // state.editId = undefined
  // state.addeditShow = true
}
// 编辑按钮
function editBtn(row) {
  // if (state.tabName == 'simulate') {
  //     state.modalTitle = '编辑模拟量索引'
  // } else if (state.tabName == 'switch') {
  //     state.modalTitle = '编辑开关量索引'
  // } else if (state.tabName == 'add') {
  //     state.modalTitle = '编辑累计量索引'
  // }
  // state.addModal = true
  // let descUrltype = state.options.descUrl
  // if (state.tabName == 'simulate') {
  //     descUrltype = state.options.descUrl
  // } else if (state.tabName == 'switch') {
  //     descUrltype = state.options1.descUrl
  // } else if (state.tabName == 'add') {
  //     descUrltype = state.options2.descUrl
  // }
  // axios.get(descUrltype + row.primaryIndexId).then(res => {
  //     if (res.code == 200) {
  //         if (res.data.sensorSwitchChildList == null) {
  //             res.data.sensorSwitchChildList = []
  //         }
  //         if (res.data.sensorSimulateChildList == null) {
  //             res.data.sensorSimulateChildList = []
  //         }
  //         if (res.data.sensorAddChildList == null) {
  //             res.data.sensorAddChildList = []
  //         }
  //         state.formData = res.data
  //         state.editId = res.data.id
  //     }
  // })
  // state.addeditShow = false
}
//措施处理按钮
function cuoshiBtn(row) {
  console.log(row, "row");
  state.cuoshiDetail = row;
  state.addModal = true;
}
// 删除
function deleteBtn(row) {
  // let delUrltype = state.options.delUrl
  // if (state.tabName == 'simulate') {
  //     delUrltype = state.options.delUrl
  // } else if (state.tabName == 'switch') {
  //     delUrltype = state.options1.delUrl
  // } else if (state.tabName == 'add') {
  //     delUrltype = state.options2.delUrl
  // }
  // let ids = []
  // if (row != 'mul') {
  //     ids = [row.primaryIndexId]
  // } else {
  //     if (store.records.length > 0) {
  //         ids = store.records.map(item => {
  //             return item.primaryIndexId
  //         })
  //     } else {
  //         proxy.$modal.msgSuccess('请先勾选所要删除数据!');
  //     }
  // }
  // if (ids.length > 0) {
  //     ElMessageBox.confirm(
  //             '确定要删除吗?',
  //             '温馨提示', {
  //                 confirmButtonText: '确定',
  //                 cancelButtonText: '取消',
  //                 type: 'warning',
  //             }
  //         )
  //         .then(() => {
  //             axios.post(delUrltype, ids).then(res => {
  //                 if (res.code == 200) {
  //                     proxy.$refs['zujianname'].getData()
  //                     state.addModal = false
  //                     proxy.$modal.msgSuccess(res.msg);
  //                     store.records = []
  //                 }
  //             })
  //         })
  //         .catch(() => {
  //             proxy.$modal.msgWarning('删除取消');
  //         })
  // }
}
// /** 提交按钮 */  /sensor/simulate/validParam
function submitForm() {
  console.log(state.optionsList.editUrl,'999')
  axios.post(state.optionsList.editUrl,state.formData).then(res => {
if(res.code==200){
ElMessage.success(res.msg);
}
  })
}

function cancel() {
  state.addModal = false;
}

function tabChange(val) {
  state.formData = {};
  state.tabNameData = val;
  if (val == "分站异常") {
    state.optionsList = state.options;
    // setTimeout(() => {
    //     proxy.$refs['zujianname'].getData()
    // },200)
  } else if (val == "测点异常") {
    state.optionsList = state.options1;
    // setTimeout(() => {
    //     proxy.$refs['zujianname'].getData()
    // },200)
  } else if (val == "电源异常") {
    state.optionsList = state.options2;
    // setTimeout(() => {
    //     proxy.$refs['zujianname'].getData()
    // },200)
  }
  getSelectList();
  setTimeout(() => {
    proxy.$refs["zujianname"].getData();
  }, 200);
}
state.optionsList = state.options;

function getSelectList() {
  //故障类型下拉框接口
  axios.get(state.optionsList.selectUrl).then(res => {
    if (res.data) {
      state.options.queryList.querys[1].options = res.data.map(item=>{
        return {
          label:item,
          value:item
        }
      })
      state.options1.queryList.querys[1].options = res.data.map(item=>{
        return {
          label:item,
          value:item
        }
      })
      state.options2.queryList.querys[0].options = res.data.map(item=>{
        return {
          label:item,
          value:item
        }
      })
    }
  });
}
onMounted(() => {
  getSelectList();
});
</script>
<style scoped lang="scss">
.inputrange {
  background: rgba(91, 109, 128, 0.08);

  ::v-deep .el-input__wrapper {
    box-shadow: none;
    background: rgba(91, 109, 128, 0);
  }
}
.form_box {
  max-height: 580px;
  overflow: auto;
  .one {
    width: 100%;
    height: 170px;
    background-color: #f5f5f5;
    padding: 10px 15px;
    .title1 {
      font-weight: 700;
      font-size: 14px;
    }
  }
  // .two {

  // }
}
</style>